<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">



  
  
    
    
  <script src="/lib/pace/pace.min.js?v=1.0.2"></script>
  <link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">







<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Hexo, NexT" />





  <link rel="alternate" href="/atom.xml" title="微凉的博客" type="application/atom+xml" />




  <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico?v=5.1.2" />






<meta name="description" content="Canvas canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。&amp;lt;canvas&amp;gt; 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。    体验Canvas">
<meta property="og:type" content="article">
<meta property="og:title" content="Canvas基础">
<meta property="og:url" content="http://yoursite.com/2017/08/30/Canvas 08302103/index.html">
<meta property="og:site_name" content="微凉的博客">
<meta property="og:description" content="Canvas canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。&amp;lt;canvas&amp;gt; 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。    体验Canvas">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://b247.photo.store.qq.com/psb?/V10u7sof1zneEB/wU3uCvgfHKr8ATkHOaE*SfVtZs5vWO3z3wmgspgLbtI!/b/dPcAAAAAAAAA&bo=sgEVAQAAAAARB5c!&rf=viewer_4">
<meta property="og:image" content="http://b68.photo.store.qq.com/psb?/V10u7sof1zneEB/gnWe6AbeDu2CacWq6EHU1.OZbBaHjGLXi5sUQdQualQ!/b/dEQAAAAAAAAA&bo=uAEHAQAAAAARAIg!&rf=viewer_4">
<meta property="og:image" content="http://b249.photo.store.qq.com/psb?/V10u7sof1zneEB/rUcBgIyAn2xlRCQXjeNSEdfyDerqjuc8*VeTCE32BZg!/b/dPkAAAAAAAAA&bo=BAIvAQAAAAARAB8!&rf=viewer_4">
<meta property="og:updated_time" content="2017-08-30T12:59:15.013Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Canvas基础">
<meta name="twitter:description" content="Canvas canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。&amp;lt;canvas&amp;gt; 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。    体验Canvas">
<meta name="twitter:image" content="http://b247.photo.store.qq.com/psb?/V10u7sof1zneEB/wU3uCvgfHKr8ATkHOaE*SfVtZs5vWO3z3wmgspgLbtI!/b/dPcAAAAAAAAA&bo=sgEVAQAAAAARB5c!&rf=viewer_4">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2017/08/30/Canvas 08302103/"/>







  <title>Canvas基础 | 微凉的博客</title>
  














</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail ">
    <div class="headband"></div>
    <a href="http://weiliangside.oschina.io"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">微凉的博客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/08/30/Canvas 08302103/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="微凉">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.png">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="微凉的博客">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">Canvas基础</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-30T20:59:14+08:00">
                2017-08-30
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          
            <span class="post-meta-divider">|</span>
            <span class="page-pv"><i class="fa fa-file-o"></i>
            <span class="busuanzi-value" id="busuanzi_value_page_pv" ></span>
            </span>
          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h2 id="Canvas"><a href="#Canvas" class="headerlink" title="Canvas"></a>Canvas</h2><blockquote>
<p>canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。<br>基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。<br>&lt;canvas&gt; 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。  </p>
</blockquote>
<h3 id="体验Canvas"><a href="#体验Canvas" class="headerlink" title="体验Canvas"></a>体验Canvas</h3><h4 id="什么是Canvas？"><a href="#什么是Canvas？" class="headerlink" title="什么是Canvas？"></a>什么是Canvas？</h4><p>HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。<br>画布是一个矩形区域，您可以控制其每一像素。<br>canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。</p>
<h4 id="创建Canvas元素"><a href="#创建Canvas元素" class="headerlink" title="创建Canvas元素"></a>创建Canvas元素</h4><p>向 HTML5 页面添加 canvas 元素。<br>规定元素的 id、宽度和高度：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">canvas</span> <span class="attr">id</span>=<span class="string">"myCanvas"</span> <span class="attr">width</span>=<span class="string">"200"</span> <span class="attr">height</span>=<span class="string">"100"</span>&gt;</span><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span></div></pre></td></tr></table></figure></p>
<h4 id="Canvas坐标系"><a href="#Canvas坐标系" class="headerlink" title="Canvas坐标系"></a>Canvas坐标系</h4><p><img src="http://b247.photo.store.qq.com/psb?/V10u7sof1zneEB/wU3uCvgfHKr8ATkHOaE*SfVtZs5vWO3z3wmgspgLbtI!/b/dPcAAAAAAAAA&amp;bo=sgEVAQAAAAARB5c!&amp;rf=viewer_4" alt=""></p>
<h4 id="通过JavaScript来绘制"><a href="#通过JavaScript来绘制" class="headerlink" title="通过JavaScript来绘制"></a>通过JavaScript来绘制</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/*获取元素*/</span></div><div class="line"><span class="keyword">var</span> myCanvas = <span class="built_in">document</span>.querySelector(<span class="string">'#myCanvas'</span>);</div><div class="line"><span class="comment">/*获取绘图工具*/</span></div><div class="line"><span class="keyword">var</span> context = myCanvas.getContext(<span class="string">'2d'</span>);</div><div class="line"><span class="comment">/*设置绘图的起始位置*/</span></div><div class="line">context.moveTo(<span class="number">100</span>,<span class="number">100</span>);</div><div class="line"><span class="comment">/*绘制路径*/</span></div><div class="line">context.lineTo(<span class="number">200</span>,<span class="number">200</span>);</div><div class="line"><span class="comment">/*描边*/</span></div><div class="line">context.stroke();</div></pre></td></tr></table></figure>
<h3 id="Canvas的基本使用"><a href="#Canvas的基本使用" class="headerlink" title="Canvas的基本使用"></a>Canvas的基本使用</h3><h4 id="图形绘制"><a href="#图形绘制" class="headerlink" title="图形绘制"></a>图形绘制</h4><p>需要理解些概念：  </p>
<ul>
<li>路径的概念</li>
<li>路径的绘制<ul>
<li>描边 stroke()  </li>
<li>填充 fill()<br><img src="http://b68.photo.store.qq.com/psb?/V10u7sof1zneEB/gnWe6AbeDu2CacWq6EHU1.OZbBaHjGLXi5sUQdQualQ!/b/dEQAAAAAAAAA&amp;bo=uAEHAQAAAAARAIg!&amp;rf=viewer_4" alt="">  </li>
</ul>
</li>
<li>闭合路径<ul>
<li>手动闭合</li>
<li>程序闭合 closePath()</li>
</ul>
</li>
<li>填充规则(非零环绕)<br><img src="http://b249.photo.store.qq.com/psb?/V10u7sof1zneEB/rUcBgIyAn2xlRCQXjeNSEdfyDerqjuc8*VeTCE32BZg!/b/dPkAAAAAAAAA&amp;bo=BAIvAQAAAAARAB8!&amp;rf=viewer_4" alt=""></li>
<li>开启新的路径 beginPath()</li>
</ul>
<h4 id="设置样式"><a href="#设置样式" class="headerlink" title="设置样式"></a>设置样式</h4><ul>
<li>画笔的状态<ul>
<li>lineWidth 线宽，默认1px</li>
<li>lineCap 线末端类型：(butt默认)、round、square </li>
<li>lineJoin 相交线的拐点 miter(默认)、round、bevel</li>
<li>strokeStyle 线的颜色</li>
<li>fillStyle 填充颜色</li>
<li>setLineDash() 设置虚线</li>
<li>getLineDash() 获取虚线宽度集合</li>
<li>lineDashOffset 设置虚线偏移量（负值向右偏移）</li>
</ul>
</li>
</ul>
<h4 id="实例练习"><a href="#实例练习" class="headerlink" title="实例练习"></a>实例练习</h4><ul>
<li><p>渐变色绘制</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div></pre></td><td class="code"><pre><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html lang=&quot;en&quot;&gt;</div><div class="line">&lt;head&gt;</div><div class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</div><div class="line">    &lt;title&gt;Title&lt;/title&gt;</div><div class="line">    &lt;style&gt;</div><div class="line">        canvas &#123;</div><div class="line">            border: 1px solid #ccc;</div><div class="line">        &#125;</div><div class="line">    &lt;/style&gt;</div><div class="line">&lt;/head&gt;</div><div class="line">&lt;body&gt;</div><div class="line">&lt;canvas width=&quot;600&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;</div><div class="line">&lt;script&gt;</div><div class="line">    var canvas = document.querySelector(&apos;canvas&apos;);</div><div class="line">    var ctx = canvas.getContext(&apos;2d&apos;);</div><div class="line"></div><div class="line"></div><div class="line">    /*1. 255长度的线条  从白色渐变到红色 */</div><div class="line">    /*2. 通过遍历设置N条1px的直线 不同颜色*/</div><div class="line">    ctx.lineWidth = 10;</div><div class="line">    for (var i = 0; i &lt; 255; i++) &#123;</div><div class="line">        ctx.beginPath();</div><div class="line">        ctx.moveTo(99+i,100);</div><div class="line">        ctx.lineTo(100+i,100);</div><div class="line">        ctx.strokeStyle = &apos;rgb(255,&apos;+(255-i)+&apos;,&apos;+(255-i)+&apos;)&apos;;</div><div class="line">        ctx.stroke();</div><div class="line">    &#125;</div><div class="line"></div><div class="line"></div><div class="line">&lt;/script&gt;</div><div class="line">&lt;/body&gt;</div><div class="line">&lt;/html&gt;</div></pre></td></tr></table></figure>
</li>
<li><p>绘制折线图</p>
<ul>
<li>绘制坐标点-面向对象</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html lang=&quot;en&quot;&gt;</div><div class="line">&lt;head&gt;</div><div class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</div><div class="line">    &lt;title&gt;Title&lt;/title&gt;</div><div class="line">    &lt;style&gt;</div><div class="line">        canvas &#123;</div><div class="line">            border: 1px solid #ccc;</div><div class="line">        &#125;</div><div class="line">    &lt;/style&gt;</div><div class="line">&lt;/head&gt;</div><div class="line">&lt;body&gt;</div><div class="line">&lt;canvas width=&quot;600&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;</div><div class="line">&lt;script&gt;</div><div class="line">    /*准备的数据*/</div><div class="line">    var data = [</div><div class="line">        &#123;x:100,y:80&#125;,</div><div class="line">        &#123;x:200,y:120&#125;,</div><div class="line">        &#123;x:300,y:180&#125;,</div><div class="line">        &#123;x:400,y:350&#125;,</div><div class="line">        &#123;x:500,y:140&#125;</div><div class="line">    ]</div><div class="line">    /*点绘制*/</div><div class="line">    var DrawDotted = function () &#123;</div><div class="line">        /*绘图工具*/</div><div class="line">        this.ctx = document.querySelector(&apos;canvas&apos;).getContext(&apos;2d&apos;);</div><div class="line">        /*点大小*/</div><div class="line">        this.edge = 10;</div><div class="line">    &#125;</div><div class="line">    DrawDotted.prototype.init = function (data) &#123;</div><div class="line">        this.drawDots(data);</div><div class="line">    &#125;</div><div class="line">    /*绘制一个点  dotted — ｛x:1,y:10｝*/</div><div class="line">    DrawDotted.prototype.drawDot = function (dotted) &#123;</div><div class="line">        this.ctx.beginPath();</div><div class="line">        this.ctx.moveTo(dotted.x-this.edge/2,dotted.y-this.edge/2);</div><div class="line">        this.ctx.lineTo(dotted.x+this.edge/2,dotted.y-this.edge/2);</div><div class="line">        this.ctx.lineTo(dotted.x+this.edge/2,dotted.y+this.edge/2);</div><div class="line">        this.ctx.lineTo(dotted.x-this.edge/2,dotted.y+this.edge/2);</div><div class="line">        this.ctx.closePath();</div><div class="line">        this.ctx.fill();</div><div class="line">    &#125;</div><div class="line">    DrawDotted.prototype.drawDots = function (data) &#123;</div><div class="line">        var that = this;</div><div class="line">        data.forEach(function (item,i) &#123;</div><div class="line">            that.drawDot(item);</div><div class="line">        &#125;);</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    new DrawDotted().init(data);</div><div class="line">&lt;/script&gt;</div><div class="line">&lt;/body&gt;</div><div class="line">&lt;/html&gt;</div></pre></td></tr></table></figure>
<ul>
<li>绘制坐标轴-面向对象</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html lang=&quot;en&quot;&gt;</div><div class="line">&lt;head&gt;</div><div class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</div><div class="line">    &lt;title&gt;Title&lt;/title&gt;</div><div class="line">    &lt;style&gt;</div><div class="line">        canvas &#123;</div><div class="line">            border: 1px solid #ccc;</div><div class="line">        &#125;</div><div class="line">    &lt;/style&gt;</div><div class="line">&lt;/head&gt;</div><div class="line">&lt;body&gt;</div><div class="line">&lt;canvas width=&quot;600&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;</div><div class="line">&lt;script&gt;</div><div class="line">    var DrawAxis = function () &#123;</div><div class="line">        /*绘图工具*/</div><div class="line">        this.ctx = document.querySelector(&apos;canvas&apos;).getContext(&apos;2d&apos;);</div><div class="line">        /*间距*/</div><div class="line">        this.space = 20;</div><div class="line">        /*画布的尺寸*/</div><div class="line">        this.width = this.ctx.canvas.width;</div><div class="line">        this.height = this.ctx.canvas.height;</div><div class="line">        /*原点坐标*/</div><div class="line">        this.x0 = this.space;</div><div class="line">        this.y0 = this.height - this.space;</div><div class="line">        /*箭头大小*/</div><div class="line">        this.arrow = 10;</div><div class="line">        /*初始化*/</div><div class="line">        this.drawAxis();</div><div class="line">    &#125;</div><div class="line">    DrawAxis.prototype.drawAxis = function () &#123;</div><div class="line">        /*x轴*/</div><div class="line">        this.ctx.moveTo(this.x0,this.y0);</div><div class="line">        this.ctx.lineTo(this.width-this.space,this.y0);</div><div class="line">        this.ctx.lineTo(this.width-this.space-this.arrow,this.y0+this.arrow/2);</div><div class="line">        this.ctx.lineTo(this.width-this.space-this.arrow,this.y0-this.arrow/2);</div><div class="line">        this.ctx.lineTo(this.width-this.space,this.y0);</div><div class="line">        this.ctx.stroke();</div><div class="line">        this.ctx.fill();</div><div class="line">        /*y轴*/</div><div class="line">        this.ctx.moveTo(this.x0,this.y0);</div><div class="line">        this.ctx.lineTo(this.space,this.space);</div><div class="line">        this.ctx.lineTo(this.space + this.arrow/2,this.space + this.arrow);</div><div class="line">        this.ctx.lineTo(this.space - this.arrow/2,this.space + this.arrow);</div><div class="line">        this.ctx.lineTo(this.space,this.space);</div><div class="line">        this.ctx.stroke();</div><div class="line">        this.ctx.fill();</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    new DrawAxis();</div><div class="line">&lt;/script&gt;</div><div class="line">&lt;/body&gt;</div><div class="line">&lt;/html&gt;</div></pre></td></tr></table></figure>
<ul>
<li>绘制完整折线图-面向对象</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html lang=&quot;en&quot;&gt;</div><div class="line">&lt;head&gt;</div><div class="line">    &lt;meta charset=&quot;UTF-8&quot;&gt;</div><div class="line">    &lt;title&gt;Title&lt;/title&gt;</div><div class="line">    &lt;style&gt;</div><div class="line">        canvas &#123;</div><div class="line">            border: 1px solid #ccc;</div><div class="line">        &#125;</div><div class="line">    &lt;/style&gt;</div><div class="line">&lt;/head&gt;</div><div class="line">&lt;body&gt;</div><div class="line">&lt;canvas width=&quot;600&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;</div><div class="line">&lt;script&gt;</div><div class="line">    /*1.准备数据*/</div><div class="line">    var data = [</div><div class="line">        &#123;x:100,y:100&#125;,</div><div class="line">        &#123;x:200,y:120&#125;,</div><div class="line">        &#123;x:300,y:180&#125;,</div><div class="line">        &#123;x:400,y:300&#125;,</div><div class="line">        &#123;x:500,y:140&#125;</div><div class="line">    ]</div><div class="line">    /*2.构建对象*/</div><div class="line">    var LineChart = function () &#123;</div><div class="line">        /*绘图工具*/</div><div class="line">        this.ctx = document.querySelector(&apos;canvas&apos;).getContext(&apos;2d&apos;);</div><div class="line">        /*画布的尺寸*/</div><div class="line">        this.width = this.ctx.canvas.width;</div><div class="line">        this.height = this.ctx.canvas.height;</div><div class="line">        /*间距*/</div><div class="line">        this.space = 20;</div><div class="line">        /*原点坐标*/</div><div class="line">        this.x0 = this.space;</div><div class="line">        this.y0 = this.height - this.space;</div><div class="line">        /*箭头大小*/</div><div class="line">        this.arrow = 10;</div><div class="line">        /*点大小*/</div><div class="line">        this.edge = 8;</div><div class="line">    &#125;</div><div class="line">    /*初始方法*/</div><div class="line">    LineChart.prototype.init = function (data) &#123;</div><div class="line">        this.drawAxis();</div><div class="line">        this.drawDots(data);</div><div class="line">    &#125;</div><div class="line">    /*画轴*/</div><div class="line">    LineChart.prototype.drawAxis = function () &#123;</div><div class="line">        /*x轴*/</div><div class="line">        this.ctx.moveTo(this.x0,this.y0);</div><div class="line">        this.ctx.lineTo(this.width-this.space,this.y0);</div><div class="line">        this.ctx.lineTo(this.width-this.space-this.arrow,this.y0+this.arrow/2);</div><div class="line">        this.ctx.lineTo(this.width-this.space-this.arrow,this.y0-this.arrow/2);</div><div class="line">        this.ctx.lineTo(this.width-this.space,this.y0);</div><div class="line">        this.ctx.stroke();</div><div class="line">        this.ctx.fill();</div><div class="line">        /*y轴*/</div><div class="line">        this.ctx.moveTo(this.x0,this.y0);</div><div class="line">        this.ctx.lineTo(this.space,this.space);</div><div class="line">        this.ctx.lineTo(this.space + this.arrow/2,this.space + this.arrow);</div><div class="line">        this.ctx.lineTo(this.space - this.arrow/2,this.space + this.arrow);</div><div class="line">        this.ctx.lineTo(this.space,this.space);</div><div class="line">        this.ctx.stroke();</div><div class="line">        this.ctx.fill();</div><div class="line">    &#125;</div><div class="line">    /*画点*/</div><div class="line">    /*转换坐标轴*/</div><div class="line">    LineChart.prototype.transform = function (data) &#123;</div><div class="line">        var that = this;</div><div class="line">        var canvasData = [];</div><div class="line">        data.forEach(function (item, i) &#123;</div><div class="line">            canvasData.push(&#123;x:that.x0+item.x,y:that.y0-item.y&#125;);</div><div class="line">        &#125;);</div><div class="line">        return canvasData;</div><div class="line">    &#125;</div><div class="line">    /*绘制单个点*/</div><div class="line">    LineChart.prototype.drawDot = function (dotted) &#123;</div><div class="line">        this.ctx.moveTo(dotted.x-this.edge/2,dotted.y-this.edge/2);</div><div class="line">        this.ctx.lineTo(dotted.x+this.edge/2,dotted.y-this.edge/2);</div><div class="line">        this.ctx.lineTo(dotted.x+this.edge/2,dotted.y+this.edge/2);</div><div class="line">        this.ctx.lineTo(dotted.x-this.edge/2,dotted.y+this.edge/2);</div><div class="line">        this.ctx.closePath();</div><div class="line">        this.ctx.fill();</div><div class="line">    &#125;</div><div class="line">    /*绘制多个点*/</div><div class="line">    LineChart.prototype.drawDots = function (data) &#123;</div><div class="line">        var that = this;</div><div class="line">        var canvasData = this.transform(data);</div><div class="line">        canvasData.forEach(function (item,i) &#123;</div><div class="line">            /*绘制单个点*/</div><div class="line">            that.drawDot(item);</div><div class="line">            /*绘制线*/</div><div class="line">            if(i == 0)&#123;</div><div class="line">                that.drawLine(that.x0,that.y0,item.x,item.y);</div><div class="line">            &#125;else&#123;</div><div class="line">                that.drawLine(canvasData[i-1].x,canvasData[i-1].y,item.x,item.y);</div><div class="line">            &#125;</div><div class="line"></div><div class="line">        &#125;);</div><div class="line">    &#125;</div><div class="line">    /*绘制线*/</div><div class="line">    LineChart.prototype.drawLine = function (mx,my,lx,ly) &#123;</div><div class="line">        this.ctx.moveTo(mx,my);</div><div class="line">        this.ctx.lineTo(lx,ly);</div><div class="line">        this.ctx.stroke();</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    new LineChart().init(data);</div><div class="line"></div><div class="line">&lt;/script&gt;</div><div class="line">&lt;/body&gt;</div><div class="line">&lt;/html&gt;</div></pre></td></tr></table></figure>
<h4 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h4><ul>
<li><a href="http://www.w3school.com.cn/tags/html_ref_canvas.asp" target="_blank" rel="external">w3school</a></li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial" target="_blank" rel="external">Canvas_API</a></li>
</ul>
<h3 id="Canvas图形绘制"><a href="#Canvas图形绘制" class="headerlink" title="Canvas图形绘制"></a>Canvas图形绘制</h3><h4 id="矩形绘制"><a href="#矩形绘制" class="headerlink" title="矩形绘制"></a>矩形绘制</h4><ul>
<li>rect(x,y,w,h) 没有独立路径</li>
<li>strokeRect(x,y,w,h) 有独立路径，不影响别的绘制</li>
<li>fillRect(x,y,w,h) 有独立路径，不影响别的绘制</li>
<li>clearRect(x,y,w,h) 擦除矩形区域</li>
</ul>
<h4 id="圆弧绘制"><a href="#圆弧绘制" class="headerlink" title="圆弧绘制"></a>圆弧绘制</h4><ul>
<li>弧度概念</li>
<li>arc()<ul>
<li>x 圆心横坐标</li>
<li>y 圆心纵坐标</li>
<li>r 半径</li>
<li>startAngle 开始角度</li>
<li>endAngle 结束角度</li>
<li>anticlockwise 是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）</li>
</ul>
</li>
</ul>
<h4 id="绘制文本"><a href="#绘制文本" class="headerlink" title="绘制文本"></a>绘制文本</h4><ul>
<li>ctx.font = ‘微软雅黑’ 设置字体</li>
<li>strokeText()</li>
<li>fillText(text,x,y,maxWidth)<ul>
<li>text 要绘制的文本</li>
<li>x,y 文本绘制的坐标（文本左下角）</li>
<li>maxWidth 设置文本最大宽度，可选参数</li>
</ul>
</li>
<li>ctx.textAlign文本水平对齐方式，相对绘制坐标来说的<ul>
<li>left</li>
<li>center</li>
<li>right</li>
<li>start 默认</li>
<li>end</li>
<li>direction属性css(rtl ltr) start和end于此相关<ul>
<li>如果是ltr,start和left表现一致</li>
<li>如果是rtl,start和right表现一致</li>
</ul>
</li>
</ul>
</li>
<li>ctx.textBaseline 设置基线（垂直对齐方式  ）<ul>
<li>top 文本的基线处于文本的正上方，并且有一段距离</li>
<li>middle 文本的基线处于文本的正中间</li>
<li>bottom 文本的基线处于文本的证下方，并且有一段距离</li>
<li>hanging 文本的基线处于文本的正上方，并且和文本粘合</li>
<li>alphabetic 默认值，基线处于文本的下方，并且穿过文字</li>
<li>ideographic 和bottom相似，但是不一样</li>
</ul>
</li>
<li>measureText() 获取文本宽度obj.width</li>
</ul>
<h4 id="实例练习-1"><a href="#实例练习-1" class="headerlink" title="实例练习"></a>实例练习</h4><ul>
<li>绘制扇形</li>
<li>绘制圆角矩形</li>
<li>绘制圆</li>
<li>绘制饼图</li>
</ul>
<h3 id="做动画"><a href="#做动画" class="headerlink" title="做动画"></a>做动画</h3><h4 id="绘制图片"><a href="#绘制图片" class="headerlink" title="绘制图片"></a>绘制图片</h4><ul>
<li>drawImage()<ul>
<li>三个参数drawImage(img,x,y)<ul>
<li>img 图片对象、canvas对象、video对象</li>
<li>x,y 图片绘制的左上角</li>
</ul>
</li>
<li>五个参数drawImage(img,x,y,w,h)<ul>
<li>img 图片对象、canvas对象、video对象</li>
<li>x,y 图片绘制的左上角</li>
<li>w,h 图片绘制尺寸设置(图片缩放，不是截取)</li>
</ul>
</li>
<li>九个参数drawImage(img,x,y,w,h,x1,y1,w1,h1)<ul>
<li>img 图片对象、canvas对象、video对象</li>
<li>x,y,w,h 图片中的一个矩形区域</li>
<li>x1,y1,w1,h1 画布中的一个矩形区域</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="序列帧动画"><a href="#序列帧动画" class="headerlink" title="序列帧动画"></a>序列帧动画</h4><ul>
<li>绘制精灵图</li>
<li>动起来</li>
<li>控制边界</li>
<li>键盘控制</li>
</ul>
<h4 id="坐标变换"><a href="#坐标变换" class="headerlink" title="坐标变换"></a>坐标变换</h4><ul>
<li>平移 移动画布的原点<ul>
<li>translate(x,y) 参数表示移动目标点的坐标</li>
</ul>
</li>
<li>缩放<ul>
<li>scale(x,y) 参数表示宽高的缩放比例</li>
</ul>
</li>
<li>旋转<ul>
<li>rotate(angle) 参数表示旋转角度</li>
</ul>
</li>
</ul>
<h3 id="flappybird小游戏"><a href="#flappybird小游戏" class="headerlink" title="flappybird小游戏"></a>flappybird小游戏</h3><h4 id="小游戏开发步骤"><a href="#小游戏开发步骤" class="headerlink" title="小游戏开发步骤"></a>小游戏开发步骤</h4><h4 id="绘制小鸟"><a href="#绘制小鸟" class="headerlink" title="绘制小鸟"></a>绘制小鸟</h4><h4 id="绘制小鸟下落"><a href="#绘制小鸟下落" class="headerlink" title="绘制小鸟下落"></a>绘制小鸟下落</h4><h4 id="绘制鸟头旋转"><a href="#绘制鸟头旋转" class="headerlink" title="绘制鸟头旋转"></a>绘制鸟头旋转</h4><h4 id="绘制小鸟上跳"><a href="#绘制小鸟上跳" class="headerlink" title="绘制小鸟上跳"></a>绘制小鸟上跳</h4><h4 id="控制多张图加载"><a href="#控制多张图加载" class="headerlink" title="控制多张图加载"></a>控制多张图加载</h4><h4 id="绘制天空"><a href="#绘制天空" class="headerlink" title="绘制天空"></a>绘制天空</h4><h4 id="绘制管道"><a href="#绘制管道" class="headerlink" title="绘制管道"></a>绘制管道</h4><h4 id="小游戏面向对象封装"><a href="#小游戏面向对象封装" class="headerlink" title="小游戏面向对象封装"></a>小游戏面向对象封装</h4><h4 id="路径判断"><a href="#路径判断" class="headerlink" title="路径判断"></a>路径判断</h4><ul>
<li>isPointInPath()</li>
<li>isPointInStroke()</li>
</ul>

      
    </div>
    
    
    



    



    

    

    <footer class="post-footer">
      

      
      
      

      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
        <!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
  <a class="jiathis_button_tsina"></a>
  <a class="jiathis_button_tqq"></a>
  <a class="jiathis_button_weixin"></a>
  <a class="jiathis_button_cqq"></a>
  <a class="jiathis_button_douban"></a>
  <a class="jiathis_button_renren"></a>
  <a class="jiathis_button_qzone"></a>
  <a class="jiathis_button_kaixin001"></a>
  <a class="jiathis_button_copy"></a>
  <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank"></a>
  <a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" >
  var jiathis_config={
    hideMore:false
  }
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->

      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
      <div id="lv-container" data-id="city" data-uid="MTAyMC8zMDQ5NC83MDQ4"></div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/images/avatar.png"
               alt="微凉" />
          <p class="site-author-name" itemprop="name">微凉</p>
           
              <p class="site-description motion-element" itemprop="description"></p>
          
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/archives/">
                <span class="site-state-item-count">1</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          

          

        </nav>

        
          <div class="feed-link motion-element">
            <a href="/atom.xml" rel="alternate">
              <i class="fa fa-rss"></i>
              RSS
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#Canvas"><span class="nav-number">1.</span> <span class="nav-text">Canvas</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#体验Canvas"><span class="nav-number">1.1.</span> <span class="nav-text">体验Canvas</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#什么是Canvas？"><span class="nav-number">1.1.1.</span> <span class="nav-text">什么是Canvas？</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#创建Canvas元素"><span class="nav-number">1.1.2.</span> <span class="nav-text">创建Canvas元素</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Canvas坐标系"><span class="nav-number">1.1.3.</span> <span class="nav-text">Canvas坐标系</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#通过JavaScript来绘制"><span class="nav-number">1.1.4.</span> <span class="nav-text">通过JavaScript来绘制</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Canvas的基本使用"><span class="nav-number">1.2.</span> <span class="nav-text">Canvas的基本使用</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#图形绘制"><span class="nav-number">1.2.1.</span> <span class="nav-text">图形绘制</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#设置样式"><span class="nav-number">1.2.2.</span> <span class="nav-text">设置样式</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#实例练习"><span class="nav-number">1.2.3.</span> <span class="nav-text">实例练习</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#参考文档"><span class="nav-number">1.2.4.</span> <span class="nav-text">参考文档</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Canvas图形绘制"><span class="nav-number">1.3.</span> <span class="nav-text">Canvas图形绘制</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#矩形绘制"><span class="nav-number">1.3.1.</span> <span class="nav-text">矩形绘制</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#圆弧绘制"><span class="nav-number">1.3.2.</span> <span class="nav-text">圆弧绘制</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#绘制文本"><span class="nav-number">1.3.3.</span> <span class="nav-text">绘制文本</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#实例练习-1"><span class="nav-number">1.3.4.</span> <span class="nav-text">实例练习</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#做动画"><span class="nav-number">1.4.</span> <span class="nav-text">做动画</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#绘制图片"><span class="nav-number">1.4.1.</span> <span class="nav-text">绘制图片</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#序列帧动画"><span class="nav-number">1.4.2.</span> <span class="nav-text">序列帧动画</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#坐标变换"><span class="nav-number">1.4.3.</span> <span class="nav-text">坐标变换</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#flappybird小游戏"><span class="nav-number">1.5.</span> <span class="nav-text">flappybird小游戏</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#小游戏开发步骤"><span class="nav-number">1.5.1.</span> <span class="nav-text">小游戏开发步骤</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#绘制小鸟"><span class="nav-number">1.5.2.</span> <span class="nav-text">绘制小鸟</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#绘制小鸟下落"><span class="nav-number">1.5.3.</span> <span class="nav-text">绘制小鸟下落</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#绘制鸟头旋转"><span class="nav-number">1.5.4.</span> <span class="nav-text">绘制鸟头旋转</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#绘制小鸟上跳"><span class="nav-number">1.5.5.</span> <span class="nav-text">绘制小鸟上跳</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#控制多张图加载"><span class="nav-number">1.5.6.</span> <span class="nav-text">控制多张图加载</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#绘制天空"><span class="nav-number">1.5.7.</span> <span class="nav-text">绘制天空</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#绘制管道"><span class="nav-number">1.5.8.</span> <span class="nav-text">绘制管道</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#小游戏面向对象封装"><span class="nav-number">1.5.9.</span> <span class="nav-text">小游戏面向对象封装</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#路径判断"><span class="nav-number">1.5.10.</span> <span class="nav-text">路径判断</span></a></li></ol></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-hand-o-right" aria-hidden="true"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">微凉</span>
</div>


<!-- <div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Muse
  </a>
</div>

-->

        
<div class="busuanzi-count">
  <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
    <span class="site-uv">
      <i class="fa fa-user"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      
    </span>
  

  
    <span class="site-pv">
      <i class="fa fa-eye"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      
    </span>
  
</div>


        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

  
  <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.2"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.2"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.2"></script>



  


  




	





  





  
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  






  





  

  

  

  

  

  

</body>
</html>
